<template>
	<div>
		<h1>VueX</h1>
		<input type="text" v-model="value">
		<button @click="add">添加</button>
		<ul>
			<li v-for="(v, i) in list" :key="i">{{ v }}</li>
		</ul>
	</div>
</template>


<script>
import { computed } from "@vue/reactivity"
import { ref } from "vue"
import { useStore } from 'vuex'
export default {
	setup() {
		// 获取仓库 类似于 this.$store
		const store = useStore()
		// 响应式数据
		const value = ref('')
		// 获取仓库的数据 需要存入计算属性上
		const list = computed(() => store.state.list)

		const add = () => {
			// 调用仓库方法
			// 提交mutations
			store.commit('addList', value.value)
		}
		return {
			value,
			list,
			add
		}
	}	
}
</script>